<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户管理</title>
    <jsp:include page="../../template/head.jsp"/>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="index2.html" class="logo">

            <span class="logo-lg">My Shop</span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->


        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <jsp:include page="../../template/menu.jsp"/>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户管理
                <small>用户列表</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 用户管理</a></li>
                <li class="active">用户列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="box ">
                        <div class="box-body table-responsive ">
                            <form id="searchForm" class="form-horizontal">
                                <div class="col-xs-3">
                                    <div class="form-group">
                                        <label for="username" class="col-sm-3 control-label">用户名</label>

                                        <div class="col-sm-5">
                                            <input class="form-control" id="username" name="username" placeholder="用户名">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <div class="form-group">
                                        <label for="phone" class="col-sm-2 control-label">手机</label>

                                        <div class="col-sm-5">
                                            <input class="form-control" id="phone" name="phone" placeholder="手机">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">邮箱</label>

                                        <div class="col-sm-5">
                                            <input class="form-control" id="email" name="email" placeholder="邮箱">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-1">
                                    <button id="search" class="btn btn-default pull-right">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->

            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <!-- /.box-header -->
                        <div class="box-body table-responsive ">
                            <table id="dataTable" class="table  table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>手机</th>
                                    <th>邮箱</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <%--<td>${item.id}</td>--%>
                                    <%--<td>${item.username}</td>--%>
                                    <%--<td>${item.phone}</td>--%>
                                    <%--<td>${item.email}</td>--%>
                                    <%--<td><fmt:formatDate value="${item.created}" pattern="yyyy-MM-dd hh:mm:ss"/></td>--%>
                                    <%--<td>--%>
                                    <%--<a type="button" class="btn  btn-info btn-sm" href="edit?id=${item.id}"><i class="fa fa-edit"></i> 修改</a>--%>
                                    <%--<button type="button" class="btn  btn-danger btn-sm"><i class="fa fa-trash"></i> 删除</button>--%>
                                    <%--</td>--%>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
            </div>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <jsp:include page="../../template/copyright.jsp"/>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->

</div>
<!-- ./wrapper -->

<jsp:include page="../../template/foot.jsp"/>


</body>


<script type="text/javascript">
    $(document).ready(function () {
        App.myModal.init();
        App.initDataTable({
            "aoColumnDefs": [{"bSortable": false, "aTargets": [4]}],
            columns: [
                {data: 'username'},
                {data: 'phone'},
                {data: 'email'},
                {
                    data: function (row) {
                        return DateTime.format(row.created, "yyyy-MM-dd HH:mm:ss");
                    }
                },
                {
                    data: function (row) {
                        return '<a type="button" class="btn  btn-default btn-sm"  id="detail" data-id="' + row.id + '"><i class="fa fa-search"></i> 查看</a> ' +
                            '<a type="button" class="btn  btn-info btn-sm" href="edit?id=' + row.id + '"><i class="fa fa-edit"></i> 修改</a> ' +
                            '<button type="button" class="btn  btn-danger btn-sm" id="delete" data-id="' + row.id + '"><i class="fa fa-trash"></i> 删除</button>'
                    }
                }
            ],
            "ajax": {
                url: "/user/page",type: "POST"
            }
        });
        $(document).on("click", "#delete", function () {
            var url = "/user/delete?id=" + $(this).data("id");
           App.myModal.showConfirm({url:url});
        });
        $(document).on("click", "#detail", function () {
            var url = "/user/detail?id=" + $(this).data("id");
            $.ajax({
                url:url,success:function(data){
                    App.myModal.showAlert(data);
                }
            })
        });

    });
</script>
</html>
